<template>
  <div class="">
    <el-container>
        <el-header class="header">
        <span style="margin-left: 10px;">宠家管理系统</span>
      <el-dropdown trigger="click">
    <span class="user">
      <el-icon>
        <User />
      </el-icon>
      管理员
      <el-icon>
        <ArrowDown />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
      </el-header>
      <el-container class="side">
        <el-aside width="200px">
            <el-menu
            style="height: 100%;"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="1"
        text-color="#fff"
      >
        <el-menu-item @click="changetab(1)" index="1">
            <span>首页</span>
        </el-menu-item>
        <el-menu-item @click="changetab(2)" index="2">
          <span>账号管理</span>
        </el-menu-item>
        <el-menu-item @click="changetab(3)" index="3">
          <span>公告管理</span>
        </el-menu-item>
        <el-menu-item @click="changetab(4)" index="4">
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item @click="changetab(5)" index="5">
          <span>服务管理</span>
        </el-menu-item>
        <el-menu-item @click="changetab(7)" index="7">
          <span>宿舍管理</span>
        </el-menu-item>
        <el-menu-item @click="changetab(6)" index="6">
          <span>反馈中心</span>
        </el-menu-item>
      </el-menu>
        </el-aside>
        <el-main>
            <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive} from 'vue'
import {RouterView,useRouter} from 'vue-router'
import {User} from '@element-plus/icons-vue'
const router=useRouter()
let tab=ref(1)
function changetab(index){
    if(tab.value===index)return
    tab.value=index
    switch(tab.value){
        case 1:
            router.replace({name:'Shouye'})
            break
        case 2:
            router.replace({name:'People'})
            break
        case 3:
            router.replace({name:'Notice'})
            break
        case 4:
            router.replace({name:'Order'})
            break
        case 5:
            router.replace({name:'Service'})
            break
        case 6:
            router.replace({name:'Fankui'})
            break
        case 7:
            router.replace({name:'Sushe'})
            break
    }
}
function logout(){
  localStorage.removeItem('denglu')
    router.replace({name:'Login'})
}
</script>



<style lang="scss" scoped>
.header{
    background-color: #f8e177;
    display: flex;
    height: 50px;
    border-radius: 10px 10px 0 0;
    align-items: center;
    justify-content: space-between;
  }
  .user{
    cursor: pointer;
  color: #ffff;
  display: flex;
  align-items: center;
  margin-right:10px ;
  }
  .side{
    height: calc(98vh - 50px);
  }
</style>
